<template>
  <div>
    <div class="show">
      计算结果: {{ cnt }} <br />
      v &times; 2: {{ doubleCount }} <br />
      v &times; 3: {{ counterStore.tripleCount }} <br />
      v &times; 10: {{ tenTimesCount }}
    </div>
    <div>
      <div class="tool">
        <select v-model="step">
          <option v-for="i of [1, 2, 3, 4, 5]" :key="i" :value="i">
            {{ i }}
          </option>
        </select>
        <button @click="add">add</button>
        <button @click="sub">sub</button>
        <button @click="mul">mul</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useCounterStore } from "../store/useCounterStore";
// const cnt = ref(0);
const counterStore = useCounterStore();
const { count: cnt, doubleCount, tenTimesCount } = storeToRefs(counterStore);
const step = ref(3);

function add() {
  // cnt.value += step.value;
  counterStore.$patch({
    count: cnt.value + step.value,
  });
}
function sub() {
  cnt.value -= step.value;
}
function mul() {
  counterStore.multiply(step.value);
}
</script>

<style scoped>
.tool > *,
.show {
  margin: 5px 10px;
}
</style>
